<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router的基本使用</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/vue-router-2.0.0.js"></script>
</head>
<body>
<div id="app">

    <!--不推荐这种写法-->
    <!--    <a href="#/login">登录</a>
        <a href="#/register">注册</a>-->

    <!--router-link 在页面会渲染为a标签-->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!--可以给路由切换加动画-->

    <!--vue-router提供的元素，专门用来当做占位符的。
    路由规则，匹配到的组件，就会展示到这个router-view
    -->
    <router-view></router-view>
</div>
</body>
<script>


    let loginComponent = {
        template: '<h1>登录组件</h1>'
    };

    let registerComponent = {
        template: '<h1>注册组件</h1>'
    };


    //路由对象
    let vueRouter1 = new VueRouter({
        route: {
            //单个 路由匹配规则
        },
    });
    let vueRouter2 = new VueRouter({
        //linkActiveClass修改路由高亮样式
        //linkActiveClass: '',

        routes: [
            //多个 路由匹配规则
            //每个路由规则都是一个对象，这个规则对象，必须有两个必须的属性
            //属性1 path 表示监听 哪个路由链接地址
            //属性2 component 表示 路由是前面匹配到的path，则展示对应的那个组件

            //默认显示登录组件，但是不推荐这种写法
            /*   {
                   path: '/',
                   //属性值，必须是组件对象，不能是组件的引用名称
                   component: loginComponent
               },*/
            //可以使用重定向 重定向到登录组件
            {
                path: '/',
                //属性值，必须是组件对象，不能是组件的引用名称
                redirect: '/login'
            },
            {
                path: '/login',
                //属性值，必须是组件对象，不能是组件的引用名称
                component: loginComponent
            },
            {
                path: '/register',
                component: registerComponent
            }
        ]
    });

    let vm = new Vue({
        el: "#app",
        data() {
            return {}
        }, methods: {},
        router: vueRouter2 //将路由规则对象，注册到vue示例上，用来监听URL地址的变化，然后展示对应的组件
        //加入router属性，运行该页面，地址末端会增加 #/
    });
</script>
</html>
